<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            getHeroList();
        })

        // 请求接口获取英雄皮肤
        function getHeroList() {
            // 1.0 确定请求的url地址：http://localhost:3006/api/getHeroSkin
            let url = 'http://localhost:3006/api/getHeroSkin';

            // 2.0 利用$.ajax发出get请求 
            $.ajax({
                url: url,
                success: res => {
                    // 3.0 在success的回调函数中处理英雄皮肤数据到表格中
                    // console.log(res);

                    // 3.1 遍历res.list
                    let resHtml = '';
                    res.list.forEach(item => {
                        // 3.2 将数据按照模板生成
                        resHtml += ` <tr>
                                        <td>${item.id}</td>
                                        <td>${item.cname}</td>
                                        <td>${item.skin_name}</td>
                                    </tr>`;
                    });

                    // 3.3 将生成好的模板html追加到tbody中
                    $('#tbody').html(resHtml);
                }
            })
        }
    </script>
</head>

<body>
    <div class="box">
        <table>
            <tr>
                <th>编号</th>
                <th>英雄名</th>
                <th>皮肤</th>
            </tr>
            <tbody id='tbody'>

            </tbody>
        </table>
    </div>
</body>

</html>